@use "@/assets/styles/mixin";

// TODO:  通用样式
:deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-textarea__inner),
:deep(.el-input__count),
:deep(.el-input__count-inner) {
  box-shadow: none !important;
  background-color: #f2f3f5 !important;
}

:deep(.el-select__wrapper){
  gap: normal !important;
}
:deep(.el-select__icon){
  color: #424E66 !important;
  font-size: 12px !important;
}

.group-rules{
  @include mixin.flex-column;
  height:100%;
  &__button{
    @include mixin.flex-align;
    margin:20px 0 9px;
    :deep(.el-button){
      margin-left: 13px;
    }
  }
  &__list{
    flex: 1;
    overflow-y: auto;
  }
  &__item{
    @include mixin.flex-align;
    .group-not-type {
      display: inline-flex;
      align-items: center;
      width: 54px;
      height: 32px;
      padding-left: 12px;
      box-sizing: border-box;
      background-color: #f2f3f5;
      border-radius: 4px;
    }
    .group-type {
      width: 54px;
      :deep(.el-select__wrapper) {
        width: 54px;
      }
    }
    .horizontal-line {
      width: 16px;
      height: 1px;
      background-color: #e5e6eb;
    }
    .branch-line {
      width: 16px;
      height: 42px;
      border: 1px solid #e5e6eb;
      border-right: 0;
    }
    & + .group-rules__item {
      margin-top: 20px;
    }
  }

  // 条件列表
  .conditions-list{
    &__item{
      @include mixin.flex-align;
      flex-wrap: nowrap;
      gap: 10px;
      margin-bottom: 10px;
      .form-field {
        width: 100px;
      }
      .form-field-err {
        border: 1px solid var(--el-color-danger);
        border-radius: 4px;
      }
      .condition-filter {
        width: 92px;
      }
    }
  }

  .del-icon{
    cursor: pointer;
  }
}



